<template>
  <div id="login-page">
    <video id="background-video" autoplay loop muted>
      <source src="https://slwl-admin.itheima.net/static/media/video.3cf57b17.mp4" type="video/mp4">
    <!-- 添加其他视频格式的源文件，以增加兼容性 -->
    </video>
    <el-card class="box-card">
      <div class="divimg">
        <img class="img" src="https://slwl-admin.itheima.net/static/img/logo1.33ef7fa0.png" alt="">
      </div>

      <el-form ref="loginForm" label-width="0" class="demo-ruleForm" :rules="rules" :model="loginForm">
        <el-form-item prop="account">
          <el-input v-model="loginForm.account" prefix-icon="el-icon-s-custom" placeholder="账号" />
        </el-form-item>
        <el-form-item prop="password">
          <el-input v-model="loginForm.password" prefix-icon="el-icon-unlock" type="password" placeholder="密码" show-password />
        </el-form-item>
        <el-form-item prop="code" class="inputFormItem">
          <el-input v-model.number="loginForm.code" prefix-icon="el-icon-mobile-phone" placeholder="验证码">
            <template slot="append"><img :src="captchaUrl" alt="" class="captchaImg" @click="refreshCaptcha"></template>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="submitBtn" @click="submitLoginForm">登录</el-button>

        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { getCaptcha } from '@/api/user'
export default {
  data() {
    return {
      captchaUrl: '', // 验证码url
      loginForm: {
        account: 'shenlingadmin', // 用户名
        password: '123456', // 密码
        code: '', // 验证码
        key: 1234// 申请验证码key
      },
      rules: {
        account: [{ required: true, message: '账号不能为空' }],
        password: [{ required: true, message: '密码不能为空' }],
        code: [{ required: true, message: '验证码不能为空' }]
      }

    }
  },
  created() {
    this.getCaptchaList()
  },
  methods: {
    // 点击验证码
    refreshCaptcha() {
      this.getCaptchaList()
    },
    // 获取验证码
    async getCaptchaList() {
      const res = await getCaptcha(this.loginForm.key)
      // 把blob转成url的形式
      this.captchaUrl = URL.createObjectURL(res)
    },
    // 提交登录表单
    async submitLoginForm() {
      this.$refs.loginForm.validate()
      this.$store.dispatch('user/login', this.loginForm)
      this.$message.success('登录成功')
      setTimeout(() => {
        this.$router.push('/')
      }, 1500)
    }
  }
}
</script>

<style scoped>

.captchaImg{
  height: 35px;
}

  #login-page {
  position: relative;
  width: 100%;
  height: 100vh; /* 使用视窗高度以充满整个屏幕 */
  overflow: hidden;
}

#background-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.login-page {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}
.el-form-item{
  padding: 0;
}
.background-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.box-card {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  padding: 20px;
  width: 400px;
}
.text {
    font-size: 14px;
  }

  .item {
    padding: 18px 0;
  }
.img{
  width: 200px;
  height: 60px;
}
.divimg{
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}
::v-deep .el-input-group__append, .el-input-group__prepend{
  background-color: #fff  ;
}
::v-deep .el-input__inner{
  border: none;
}
.el-form-item{
border: 1px solid #ccc;
  border-radius: 5px;
}

 .submitBtn{
  background-color: #e15536;
  width: 100%;
  border: none;
}
</style>
